<template>
	<view class="content">
		<view class="info-con">
			<view style="display: flex;align-items: center;color: #000000;font-size: 27rpx;">
				<view class="re-bg"></view>
				<view style="margin-left: 10rpx;">缴费订单</view>
			</view>
			<view class="flex-row" style="margin-top: 32rpx;">
				<view>就诊人姓名</view>
				<view class="info-text">
					<u--text mode="name" :text="name" format="encrypt"></u--text>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>患者卡号</view>
				<view v-if="card" class="info-text">
					{{card.substr(0, 1) + '****************' + card.substr(-1, 1)}}
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>

			<view class="flex-row">
				<view>就诊医生</view>
				<view class="info-text" style="display: flex;align-items: center;">
					<text>{{admDoctor}}</text>
					<text style="margin-left: 10rpx;">({{admDept}})</text>
				</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>金额</view>
				<view class="info-text" style="color: #FF1212">￥{{admTotalMoney}}</view>
			</view>
			<u-line color="#E7E7E7"></u-line>
			<view class="flex-row">
				<view>就诊日期</view>
				<view class="info-text">{{admDateTime}}</view>
			</view>

		</view>
		<view class="reslut-but">
			<view style="width: 329rpx;height: 85rpx;">
				<u-button type="primary" plain text="就诊卡余额缴费" @click="cardPay"></u-button>
			</view>
			<view style="width: 329rpx;height: 85rpx;">
				<u-button type="primary" text="微信自费" @click="wxPay"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		payApi,
		createApi
	} from "@/api/user"
	export default {
		data() {
			return {
				id: '',
				name: '',
				card: '',
				admDoctor: '',
				admDept: '',
				admTotalMoney: '',
				admDateTime: '',
				receiptNo: '',
			}
		},

		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.id = item.id
			this.name = item.name
			this.card = item.card
			this.admDoctor = item.admDoctor
			this.admDept = item.admDept
			this.admTotalMoney = item.admTotalMoney
			this.admDateTime = item.admDateTime
			this.receiptNo = item.receiptNo
		},
		methods: {

			async cardPay() {
				try {
					uni.showLoading({
						title: '缴费中...',
						mask: true
					})
					const res = await payApi({
						id: this.id,
						receiptNo: this.receiptNo,
						money: this.admTotalMoney,
					})
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/paysucceed/paysucceed'
					})
				} catch (e) {
					uni.hideLoading()
				}
			},
			async wxPay() {
				try {
					uni.showLoading({
						title: '缴费中...',
						mask: true
					})
					const res = await createApi({
						id: this.id,
						type: 3,
						money: this.admTotalMoney,
						receiptNo: this.receiptNo,
					})
					uni.hideLoading()
					this.wxpayOrder(JSON.parse(res.msg))
				} catch (e) {
					uni.hideLoading()
				}

			},
			wxpayOrder(data) {
				if (typeof WeixinJSBridge === 'undefined') {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false)
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data))
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data))
					}
				} else {
					this.onBridgeReady(data)
				}
			},
			onBridgeReady(etr) {
				let that = this
				WeixinJSBridge.invoke( //这个对象只有微信浏览器支持
					'getBrandWCPayRequest', etr,
					function(res) {
						if (res.err_msg == 'get_brand_wcpay_request:ok') {
							uni.navigateTo({
								url: '/pages/paysucceed/paysucceed'
							})
						} else {
							uni.$u.toast('缴费失败')
						}
					})

			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100%;
		background: #F8F8F8;
		color: #666666;
		font-size: 27rpx;
	}

	.info-con {
		width: 750rpx;
		padding: 0 31rpx;
		padding-top: 23rpx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.flex-row {
		display: flex;
		align-items: center;
		padding: 21rpx 0;
	}

	.info-text {
		margin-left: auto;
		color: #000000;
	}

	.user-lista {
		width: 688rpx;
		height: 185rpx;
		background: linear-gradient(135deg, #05A2FF 0%, #0CCFFF 100%);
		border-radius: 19rpx;
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 23rpx;
	}

	.re-bg {
		background-color: #05A2FF;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
	}

	.list-texta {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.user-buta {
		margin-left: auto;
		width: 146rpx;
		height: 62rpx;
		background: #FFFFFF;
		border-radius: 31rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #05A2FF;
	}

	.reslut-but {
		display: flex;
		justify-content: space-between;
		margin: 0 31rpx;
		margin-top: 92rpx;

	}

	.pop-con {
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pop-title {
		width: 100%;
		text-align: center;
		font-weight: 500;
		color: #000000;
		font-size: 31rpx;
	}

	.scroll-y {
		height: 400rpx;
		width: 688rpx;
		margin-top: 31rpx;
		box-sizing: border-box;
	}

	.user-list {
		width: 688rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		padding-left: 19rpx;
		padding-right: 29rpx;
		padding-top: 23rpx;
		padding-bottom: 44rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 23rpx;
		box-shadow: 0px 0 13rpx 0px rgba(5, 162, 255, 0.11);
		color: #999999;
		font-size: 23rpx;
	}

	.list-text {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.book-but {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 31rpx;
	}
</style>